<template>
  <div class="my-container">
    <myNavbar title="我的" showLeft />
    <myList
      @load="load"
      @refresh="refresh"
      v-model:refreshing="refreshing"
      v-model:loading="loading"
      :finished="finished"
    >
      <template #default>
        <van-cell v-for="item in list" :key="item.index" :title="item.title" />
      </template>
    </myList>
  </div>
</template>

<script setup>
import myNavbar from '@/components/my-navbar/index.vue'
import myList from '@/components/my-list/index.vue'

// import { getList } from '@/api'

const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const params = ref({
  page: 0,
  pageSize: 5,
})

const list = ref([])

const load = async () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }

  // const res = await getList(params.value)

  list.value.push(...res.data)

  loading.value = false

  if (list.value.length === res.data.length) {
    finished.value = true
  } else {
    params.value.page++
  }
}

const refresh = () => {
  finished.value = false
  loading.value = true
  load()
}
</script>

<style scoped lang="less"></style>
